<template>
    <div class="homeHeader">
      <div class="headrLeft"><span class="iconfont">&#xe658;</span></div>
      <div class="headrInput"><input type="text"  placeholder="请输入您想输入的城市"></div>
      <router-link tag="div" class="headrRight" to="./cityList">
        <span>{{this.city}}</span><span class="iconfont">&#xe626;</span>
      </router-link>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
      name: "homeHeader",
      computed:mapState({
        // count: 'count', // 第一种写法
        city: (state) => state.city, // 第二种写法

      }),
    }
</script>

<style scoped lang="stylus">
  @import "~commonStyle/comment.styl"
  .homeHeader
    display flex
    height $headerHeight
    background-color $bgColor
    line-height $headerHeight
    .headrLeft
      float left
      padding-left .1rem;
      .iconfont
          font-size .6rem
          padding  0
    .headrInput
      flex 1
      input
        text-indent .05rem
        height .66rem
        border-radius .08rem
        width 100%

    .headrRight
      float right
      padding 0 .1rem


</style>
